<template>
  <div class="statistics">
    <div v-for="item in data" :key="item.id" class="item">
      <div class="left">
        <img :src="item.img" alt="" srcset="" class="icon">
      </div>
      <div class="info">
        <div class="num">{{ item.value }}</div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
.statistics {
  display: flex;
  justify-content: first baseline;
  flex-wrap: wrap;
  .item {
    width: 49.5%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .info {
      color: #ffffff;
      font-family: Microsoft Yahei;
      margin-left: 15px;
      .num {
        font-size: 32px;
        font-weight: 700;
      }
      .text {
        font-size: 12px;
        color: #b0c2f9;
      }
    }
  }
}
</style>
